
const cards = document.getElementsByClassName('card');
const card = cards[0];

const cardWidth = card.offsetWidth;
const cardHeight = card.offsetHeight;
const cardLeft = card.offsetLeft;
const cardTop = card.offsetTop;

// 进入卡片，开始设置偏移
card.addEventListener('mouseenter', (e) => {
});

// 偏移改变
card.addEventListener('mousemove', (e) => {
  const mouseX = e.pageX - cardLeft - cardWidth / 2;
  const mouseY = e.pageY - cardTop - cardHeight / 2;
  const px = mouseX / cardWidth;
  const py = mouseY / cardHeight;
  setTransform(e.target, px, py);
});

// 离开卡片，恢复偏移
card.addEventListener('mouseleave', (e) => {
  setTransform(e.target, 0, 0);
});

// 设置偏移
function setTransform(target, px, py) {
  if (!target) {
    return;
  }
  const imgs = target.getElementsByClassName('img');
  const img = imgs[0];
  if (!img) {
    return;
  }

  img.style.setProperty('transform', `translateX(${ px* -40 }px) translateY(${ py* -40 }px)`);
  target.style.setProperty('transform', `rotateX(${ py* -30 }deg) rotateY(${ px* 30 }deg)`);
}
